<template>
	<view class="main animated fadeIn faster">
		<view class="position-fixed w-100 z-index-100 pb-1" :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor}">
			<view :style="{'width': $store.state.titleBarWidth + 'px'}">
				<view class="d-flex d-flex-middle d-flex-between pl-3 pr-1" :style="{'height': $store.state.titleBarHeight + 'px'}">
					<text class="iconfont icon-iconset0160 loudou mr-3"></text>
					<view class="d-flex d-flex-middle mr-2">
						<text class="iconfont font30 icon-dingwei colorblue mr"></text>
						<text class="color71 font24">辽宁(切换)</text>
					</view>
					<view class="d-flex-item srch d-flex d-flex-middle pl-2">
						<text class="iconfont icon-sousuo colorblue"></text>
						<text class="colorhold font24 ml-1">请输入关键字</text>
					</view>
				</view>
			</view>
		</view>
		<view :style="{paddingTop:$store.state.statusBarHeight+'px',height: $store.state.titleBarHeight + 'px'}"></view>
		<view class="d-flex d-flex-middle d-flex-between mt-3 mb-4">
			<view class="pl-2 d-flex d-flex-middle" @click="prev" style="height: 82rpx;">
				<text class="iconfont icon-left-circle"></text>
			</view>
			<swiper class="d-flex-item" :current="current" @change="swiperChange" circular style="height: 82rpx;">
				<swiper-item v-for="(avalist,aindex) in avatarList" :key="aindex">
					<view class="d-flex-item d-flex d-flex-middle d-flex-between mx-2">
						<image class="avatarImg" :class="{'avatarImgCur':avaIndex == 0}" v-for="(avatar,avaIndex) in avalist" :key="avatar.id" :src="avatar.img" style="width: 70rpx;height: 70rpx;border-radius: 20rpx;"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="pr-2 d-flex d-flex-middle" @click="next" style="height: 82rpx;">
				<text class="iconfont icon-right-circle-copy"></text>
			</view>
		</view>
		<view class="px-2 pb-6">
			<swiper style="width: 710rpx;" @change="changeSwiper" :current="currentIndex" :style="{ height: swiperHeight + 'px' }" circular>
				<swiper-item v-for="(item,index) in itemList" :key="item.id">
					<view class="bg-fff rounded30" :id="'content-wrap' + index">
						<view class="p-2 d-flex d-flex-between">
							<view class="d-flex d-flex-middle">
								<image class="rounded" :src="item.avatar" style="width: 70rpx;height: 70rpx;"></image>
								<view class="ml-1-5">
									<text class="font32 font-bold colorblack">{{item.nickname}}</text>
									<text class="color71 font22 ml-1">已有1213人发布</text>
								</view>
							</view>
							<text class="iconfont icon-gengduo1 font32 morecolor"></text>
						</view>
						<view class="colorblack font40 font-bold px-3 mb-2">
							{{item.name}}
						</view>
						<view class="pl mb-3">
							<image class="rounded30" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/index-ad.png" mode="widthFix" style="width: 700rpx;"></image>
						</view>
						
						<view class="px-2">
							<view class="px-3 py-2 d-flex d-flex-wrap bg-f5 rounded20 mb-1">
								<view class="i-item-box d-flex d-flex-middle">
									<image class="mr" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/star.png" mode="heightFix" style="height: 30rpx;"></image>
									<text>王者荣耀</text>
								</view>
								<view class="i-item-box">找CP</view>
								<view class="i-item-box">QQ区</view>
								<view class="i-item-box">游走</view>
								<view class="i-item-box">30分钟</view>
							</view>
							
							<view class="px-3 py-3 d-flex d-flex-middle bg-f5 rounded20 mb-1 hidden">
								<view class="mr-6 d-flex d-flex-center d-flex-middle" style="width: 260rpx;height: 210rpx;">
									<view class="charts-box">
									  <qiun-data-charts 
									    type="radar"
										:reshow="true"
									    :opts="opts"
									    :chartData="chartData"
									  />
									</view>
								</view>
								
								<!-- <image class="mr-6" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/leida.png" mode="widthFix" style="width: 208rpx;"></image> -->
								<view class="d-flex-item d-flex d-flex-column">
									<view class="mb-1 d-flex d-flex-middle">
										<text class="font36 font-bold colorblack mr">荣耀之王</text>
										<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/star.png" mode="heightFix" style="height: 50rpx;"></image>
									</view>
									<view class="color71 font26">操作稳健，团队合作王者</view>
								</view>
							</view>
							
							
							<view class="px-3 py-3 bg-f5 rounded20">
								<view class="d-flex d-flex-middle mb-3">
									<view class="d-flex-item d-flex d-flex-middle mb-2">
										<image class="rounded" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/a1.png" style="width: 90rpx;height: 90rpx;"></image>
										<view class="ml-2">
											<view class="mb d-flex d-flex-middle">
												<text class="font30 mr-1">Kate</text>
												<text class="iconfont icon-xingbie sex-color"></text>
											</view>
											<view class="color999 font20 mb">段位要求:荣耀王者</view>
											<view class="color999 font20">想找分路:游走</view>
										</view>
									</view>
									<view class="d-flex-item d-flex d-flex-center d-flex-column d-flex-middle">
										<image class="rounded" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/a2.png" style="width: 90rpx;height: 90rpx;"></image>
										<text class="mt font20 color000">ENTG</text>
									</view>
								</view>
								<view class="d-flex d-flex-between" style="padding-left: 35rpx;padding-right: 35rpx;">
									<view class="d-flex-item d-flex d-flex-middle d-flex-center ml-5 btn-bg" style="width: 210rpx;height: 60rpx;border-radius: 50rpx;">
										<text class="colorfff">关注</text>
									</view>
									
									<view class="d-flex-item d-flex d-flex-middle d-flex-center ml-5 btn-bg" style="width: 210rpx;height: 60rpx;border-radius: 50rpx;">
										<text class="colorfff">嗒一嗒</text>
									</view>
								</view>
							</view>
						</view>
						
						<view class="d-flex d-flex-center d-flex-column d-flex-middle py-3">
							<text class="color999 font24 mb-1">左右滑动查看更多</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
			
		</view>
		<view class="fab" @click="publish">
			<text class="colorfff">发布</text>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import { goodsApi } from '@/http/goodsApi';
	export default {
		data() {
			return {
				title: 'wukang',
				current:0,
				bgcolor:'transparent',
				avatarList:[
					[
						{
							id:'1',
							img:'https://gp-dev.cdn.bcebos.com/gp-dev/upload/file/source/5652440e6d12b379395e0eccfb7f9452.png'
						},{
							id:'2',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/ed39ad04e7655cbea70fe406f70a7fe8/ed39ad04e7655cbea70fe406f70a7fe8.png'
						},{
							id:'3',
							img:'https://gp-open-platform.cdn.bcebos.com/204407191619/7ab388e6baf921096b7a414e38f6ee40/gp-open-platform/upload/file/img/256771a610177f2695d7d5c94d6b05cc.png'
						},{
							id:'4',
							img:'https://gdown.baidu.com/appcenter/source/1396538632/cb06b8d26ddda8c0f792a0dc5a65b6e8/res/mipmap-xxxhdpi-v4/app_icon.png'
						},{
							id:'5',
							img:'https://gp-open-platform.cdn.bcebos.com/204404240735/c5aa61d3b0332610c536720deb6d6d45/gp-open-platform/upload/file/img/2cd090351808d067084bb98bbca58a2b.png'
						},{
							id:'6',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/source/9bd4a29b16e16da2aa4f60fcb2a46f20.jpeg'
						},{
							id:'7',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/7e0ffc4fc660dfad28d7f377a684589f/7e0ffc4fc660dfad28d7f377a684589f.png'
						}
					],
					[
						{
							id:'8',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/ed39ad04e7655cbea70fe406f70a7fe8/ed39ad04e7655cbea70fe406f70a7fe8.png'
						},{
							id:'9',
							img:'https://gp-dev.cdn.bcebos.com/gp-dev/upload/file/source/5652440e6d12b379395e0eccfb7f9452.png'
						},{
							id:'10',
							img:'https://gp-open-platform.cdn.bcebos.com/204407191619/7ab388e6baf921096b7a414e38f6ee40/gp-open-platform/upload/file/img/256771a610177f2695d7d5c94d6b05cc.png'
						},{
							id:'11',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/source/9bd4a29b16e16da2aa4f60fcb2a46f20.jpeg'
						},{
							id:'12',
							img:'https://gp-open-platform.cdn.bcebos.com/204404240735/c5aa61d3b0332610c536720deb6d6d45/gp-open-platform/upload/file/img/2cd090351808d067084bb98bbca58a2b.png'
						},{
							id:'13',
							img:'https://gdown.baidu.com/appcenter/source/1396538632/cb06b8d26ddda8c0f792a0dc5a65b6e8/res/mipmap-xxxhdpi-v4/app_icon.png'
						},{
							id:'14',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/7e0ffc4fc660dfad28d7f377a684589f/7e0ffc4fc660dfad28d7f377a684589f.png'
						}
					],
					[
						{
							id:'15',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/7e0ffc4fc660dfad28d7f377a684589f/7e0ffc4fc660dfad28d7f377a684589f.png'
						},{
							id:'16',
							img:'https://gp-open-platform.cdn.bcebos.com/204407191619/7ab388e6baf921096b7a414e38f6ee40/gp-open-platform/upload/file/img/256771a610177f2695d7d5c94d6b05cc.png'
						},{
							id:'17',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/ed39ad04e7655cbea70fe406f70a7fe8/ed39ad04e7655cbea70fe406f70a7fe8.png'
						},{
							id:'18',
							img:'https://gdown.baidu.com/appcenter/source/1396538632/cb06b8d26ddda8c0f792a0dc5a65b6e8/res/mipmap-xxxhdpi-v4/app_icon.png'
						},{
							id:'19',
							img:'https://gp-open-platform.cdn.bcebos.com/204404240735/c5aa61d3b0332610c536720deb6d6d45/gp-open-platform/upload/file/img/2cd090351808d067084bb98bbca58a2b.png'
						},{
							id:'20',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/source/9bd4a29b16e16da2aa4f60fcb2a46f20.jpeg'
						},{
							id:'21',
							img:'https://gp-dev.cdn.bcebos.com/gp-dev/upload/file/source/5652440e6d12b379395e0eccfb7f9452.png'
						}
					]
				],
				itemList:[
					{
						id:'1',
						avatar:'https://gp-dev.cdn.bcebos.com/gp-dev/upload/file/source/5652440e6d12b379395e0eccfb7f9452.png',
						nickname:'王者荣耀',
						name:'荣耀王者峡谷对战,体验突破传统、英雄竞技新形态!'
					},{
						id:'2',
						avatar:'https://gp-open-platform.cdn.bcebos.com/204404240735/c5aa61d3b0332610c536720deb6d6d45/gp-open-platform/upload/file/img/2cd090351808d067084bb98bbca58a2b.png',
						nickname:'平行精英',
						name:'腾讯游戏致力于为用户创造高品质数字生活体验'
					},{
						id:'3',
						avatar:'https://gp-open-platform.cdn.bcebos.com/204404240735/c5aa61d3b0332610c536720deb6d6d45/gp-open-platform/upload/file/img/2cd090351808d067084bb98bbca58a2b.png',
						nickname:'梦幻西游',
						name:'话说数千年前，蚩尤复活动乱，挑拨仙魔大战'
					}
				],
				swiperHeight: 760,
				currentIndex: 0,
				chartData: {},
				opts: {
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [0,0,0,0],
					dataLabel: false,
					enableScroll: false,
					width:100,
					height:100,
					fontSize: 10,
					legend: {
						show: false,
						position: "right",
						lineHeight: 25,
					},
					extra: {
						radar: {
							gridType: "radar",
							gridColor: "#cccccc",
							gridCount: 3,
							opacity: .6,
							max: 10,
							fontSize:12,
							labelShow: true,
							border: false,
						},
					}
				}
			}
		},
		onReady() {
			this.init()
			this.getServerData()
		},
		onLoad() {
			let that = this
			setTimeout(()=>{
				that.setSwiperHeight()
			},1000)
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 10) {
				this.bgcolor = '#c2edf4'
			}else{
				this.bgcolor = 'transparent'
			}
		},
		methods: {
			changeSwiper(e) {
				this.currentIndex = e.detail.current;
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			setSwiperHeight(){
				let element = "#content-wrap" + this.currentIndex;
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						this.swiperHeight = res[0].height;
					}
				});
			},
			swiperChange(e){
				this.current = e.detail.current;
			},
			prev() {
				if (this.current > 0) {
					this.current -= 1;
				}else{
					this.current = 2
				}
			},
			next() {
				if (this.current < 2) {
					this.current += 1;
				}else{
					this.current = 0
				}
			},
			async init(){
				try{
					// const result = await goodsApi.initData();
				}catch(e){
					// TOD
				}
			},
			getServerData() {
			  setTimeout(() => {
			    let res = {
			        categories: ["维度1","维度2","维度3","维度4","维度5","维度6"],
			        series: [
			          {
			            name: "",
			            data: [45,98,165,195,187,172]
			          },
			          {
			            name: "",
			            data: [120,100,105,35,27,102]
			          }
			        ]
			      };
			    this.chartData = JSON.parse(JSON.stringify(res));
			  }, 500);
			},
			publish(){
				uni.navigateTo({
					url:'/pagesMain/edite-card/edite-card'
				})
			}
		}
	}
</script>

<style scoped>
	.loudou{
		color: #cfc3d1;
		font-size: 32rpx;
	}
	.srch{
		height: 60rpx;
		background-color: #ffffff;
		border-radius: 50rpx;
	}
	.morecolor{
		color: #592e68;
	}
	.avatarImg{
		border-style: solid;
		border-width: 6rpx;
		border-color: transparent;
	}
	.avatarImgCur{
		border-color: #e65fd0;
	}
	.i-item-box{
		border-radius: 30rpx;
		padding: 8rpx 15rpx;
		background: #d1f3fd;
		font-size: 22rpx;
		color: #48c3fe;
		margin: 10rpx 10rpx;
		border:solid 1px #4ac5ff
	}
	.btn-bg{
		background-image: linear-gradient(to right, #e65fd0, #69adf8);
	}
	.fab{
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		background-image: linear-gradient(to right, #5faefb, #84f3c9);
		z-index: 10;
		right: calc(60rpx + var(--window-right));
		bottom: calc(150rpx + var(--window-bottom));
	}
	.charts-box {
	  width: 320rpx;
	  height: 320rpx;
	}
</style>
